<template>
    <header :style="{backgroundImage:`url(${seller.avatar})`}" >
        <div class="mask">
            <div class="info">
                <img :src="seller.avatar" alt="商家Logo" />
                <div class="content">
                    <p>{{seller.name}}</p>
                    <p>{{seller.description}}/30分钟送达</p>
                    <p>{{support}}</p>
                </div>
                <div class="discount">
                    <span>{{length}}个</span>
                    <span class="iconfont icon-angle-right"></span>
                </div>
            </div>

            <div class="tisp">
                <span>公告</span>
                <span>{{seller.bulletin}}</span>
                <span class="iconfont icon-angle-right"></span>
            </div>
            
        </div>
    </header>
</template>

<script>
import { mapState } from 'vuex'
    export default {
        data(){
            return{}
        },
        unmounted(){
            // console.log( this.seller );
        },
        computed: {
            ...mapState([ 'seller' ]),
            support(){
                if(this.seller.supports){
                  return this.seller.supports[0].description

                }else{
                    return ""
                }
            },
            length(){
                if(this.seller.supports){
                  return this.seller.supports.length

                }else{
                    return 0
                }
            }
        }
    }
</script>

<style scoped>
header{
    width: 100%;
    height: 35.733vw;
    box-sizing: border-box;
    overflow: hidden;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 0vw -30vw;
    position: relative;
}
header>.mask{
    width: 100%;
    height: 100%;
    background-color: rgba(0, 17, 27, 0.5);
    backdrop-filter: blur(7px);
    position: absolute;
    left: 0vw;
    top: 0vw;
    /* padding: 6.4vw 0 0 6.4vw; */
    box-sizing: border-box;
}
header .info{
    margin: 6.4vw 4.267vw 0 6.4vw;
    position: relative;
    display: flex;
}
header .info>img{
    width: 17.067vw;
    border-radius: 0.667vw;
    margin-right: 4.267vw;
}
header .info>.content{
    /* background-color: red; */
    flex: 1;
    color: rgb(255, 255, 255);
}
header .info>.content>p:nth-child(1){
    font-size: 4.267vw;
    font-weight: bold;
    line-height: 4.8vw;
    display: flex;
    justify-content: start;
}
header .info>.content>p:nth-child(1)::before{
    content: '品牌';
    display: block;
    background-color: red;
    width: 8vw;
    height: 4.26vw;
    line-height: 4.26vw;
    text-align: center;
    font-size: 3vw;
    margin-top: 0.533vw;
    margin-right: 1.6vw;
}
header .info>.content>p:nth-child(2){
    font-size: 3.2vw;
    line-height: 3.2vw;
    margin-top: 2.133vw;
}
header .info>.content>p:nth-child(3){
    font-size: 2.667vw;
    line-height: 3.2vw;
    margin-top: 2.667vw;
    display: flex;
    justify-content: start;
}
header .info>.content>p:nth-child(3)::before{
    content: '减';
    display: block;
    padding: 0.267vw;
    margin-right: 1.067vw;
    background-color: rgb(255, 255, 255);
    color: red;
}

.discount{
    font-size: 2.667vw;
    color: white;
    border-radius: 5vw;
    padding:  1.867vw 3vw;
    text-align: center;
    background-color: rgba(0, 0, 0, .2);
    position: absolute;
    top: 9vw;
    right: 5vw;
}
.discount>span:first-child{
    margin-right: 1.067vw;
}

header .tisp{
    width: 100%;
    height: 7.467vw;
    background-color: rgba(0, 17, 27, 0.2);
    margin-top: 4.8vw;
    font-size: 2.667vw;
    padding: 0 3.2vw;
    line-height: 7.467vw;
    color: rgb(255, 255, 255);
    font-weight: 200;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    flex-wrap: nowrap;
    position: relative;
}
header .tisp>span:nth-child(1){
    background-color: white;
    color: black;
    display: block;
    padding: 0.267vw 0.533vw;
    width: 8vw;
    /* flex: 1 0 7vw; */
    height: 3.8vw;
    line-height: 3.8vw;
    margin-top: 2vw;
    text-align: center;
    margin-right: 2vw;
}
header .tisp>span:nth-child(2){
    flex: 1;
    margin-right: 1vw;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
header .tisp>span:nth-child(3){
    font-size: 4vw;
    position: absolute;
    top: 0.5vw;
    right: 2vw;
}
</style>